<template>
  <!-- 主容器 -->
  <div id="all" class="viewmiddle_3 dark_bgcolor2"  @dragover.prevent @drop.prevent="handleDrop">
    <!-- 内容区域 -->
    <div id="nierong">
      <!-- 标题 -->
      <div>
        <h4>文案提取</h4>
      </div>
      <!-- 描述文字 -->
      <span>一键提取短视频旁白</span>
      <!-- 分割线 -->
      <el-divider />

      <!-- 输入和输出区域 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>短视频链接或音视频文件</div>
          </el-col>
          <el-col :span="12">
            <div>结果解析</div>
          </el-col>
        </el-row>
      </div>

      <!-- 文本输入框 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>
              <textarea 
                v-model="textarea1" 
                class="dark_bgcolor qsxtext" 
                maxlength="8000" 
                placeholder="请输入短视频链接或上传音视频文件"
              ></textarea>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <textarea 
                v-model="textarea2" 
                class="dark_bgcolor qsxtext" 
                maxlength="8000" 
                placeholder="提取的旁白将显示在这里"
                readonly
              ></textarea>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 操作按钮 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>
              <el-button 
                type="primary" 
                style="background-color: blueviolet; border: transparent;" 
                @click="extractCaption"
              >
                提取文案
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-button 
                  type="primary" 
                  style="background-color: darkgrey; border: transparent;" 
                  @click="copyText"
                >
                  复制文本
                </el-button>
              </el-col>
              <el-col :span="5">
                <el-button 
                  type="primary" 
                  style="background-color: darkgrey; border: transparent;" 
                  @click="downloadTextFile"
                >
                  下载文本文件
                </el-button>
              </el-col>
              <el-col :span="4">
                <el-button 
                  type="primary" 
                  style="background-color: darkgrey; border: transparent;" 
                  @click="exportSubtitle"
                >
                  导出字幕
                </el-button>
              </el-col>
              <el-col :span="5">
                <el-button 
                  type="primary" 
                  style="background-color: darkgrey; border: transparent;" 
                  @click="editAndExportSubtitle"
                >
                  编辑字幕并导出
                </el-button>
              </el-col>
              <el-col :span="4">
                <el-button 
                  type="primary" 
                  style="background-color: darkgrey; border: transparent;" 
                  @click="goToDubbing"
                >
                  前去配音
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!-- 备注信息 -->
      <div style="margin-top: 50px;">
        点击『提取文案』按钮，即可解析视频旁白（若源视频内容太大，有小概率会提取失败，可使用本地音视频方式解析哦）
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
// 响应式变量，用于绑定输入框的值
const textarea1 = ref('') // 短视频链接或音视频文件输入框
const textarea2 = ref('') // 结果解析输出框

// 路由相关
const router = useRouter();
const route = useRoute();

// 提取文案函数（示例，具体实现需根据实际需求）
const extractCaption = () => {
  // 这里可以调用后端接口或进行前端处理
  textarea2.value = `提取的旁白：${textarea1.value}`
}

// 复制文本函数
const copyText = () => {
  navigator.clipboard.writeText(textarea2.value)
    .then(() => {
      successMessage("文本已复制到剪贴板");
     
    })
    .catch(err => {
      console.error('复制失败:', err)
    })
}

// 下载文本文件函数
const downloadTextFile = () => {
  const element = document.createElement('a')
  const fileContent = new Blob([textarea2.value], { type: 'text/plain' })
  element.href = URL.createObjectURL(fileContent)
  element.download = 'extracted_caption.txt'
  document.body.appendChild(element)
  element.click()
  document.body.removeChild(element)
}

// 导出字幕函数
const exportSubtitle = () => {
  // 这里可以调用后端接口或生成字幕文件
  successMessage("字幕已导出");

}

// 编辑字幕并导出函数
const editAndExportSubtitle = () => {
  // 这里可以跳转到编辑页面或直接编辑并导出

  successMessage("编辑字幕并导出功能暂未实现");
}

// 前去配音函数
const goToDubbing = () => {
  // 这里可以跳转到配音页面
 
  router.push('/');
}

 ///封装成功提示 
 const successMessage = (value:string) => {
      ElMessage({
        message: value,
        type: 'success',
      })
    }
    ///封装错误提示 
    const errorMessage = (value:string) => {
      ElMessage.error(value)
    }

// 处理文件拖放
const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  if (event.dataTransfer && event.dataTransfer.files.length > 0) {
    const file = event.dataTransfer.files[0]
    const filePath = file.path || file.name // 获取文件路径或文件名
    textarea1.value = filePath
  }
}
</script>

<style scoped>
/* 内容区域的样式 */
#nierong {
  padding: 20px 40px; /* 设置内边距 */
}

/* 主容器样式 */
.viewmiddle_3 {
  border-radius: 10px; /* 设置圆角 */
  margin-top: 50px; /* 设置上外边距 */
  width: 100%; /* 设置宽度为100% */
  height: 100; /* 设置高度 */
}

/* 文本输入框样式 */
.qsxtext {
  width: 100%; /* 设置宽度为100% */
  height: 230px; /* 设置高度 */
  margin-top: 10px; /* 设置上外边距 */
  resize: none; /* 禁止用户调整大小 */
}
</style>